<template>
  <Transition name="alert">
    <div v-if="visible" :class="alertClasses">
      <div class="hjr-alert__icon" v-if="showIcon">
        <span v-if="type === 'success'">✓</span>
        <span v-else-if="type === 'warning'">⚠</span>
        <span v-else-if="type === 'error'">✕</span>
        <span v-else>ℹ</span>
      </div>
      <div class="hjr-alert__content">
        <div v-if="title" class="hjr-alert__title">{{ title }}</div>
        <div class="hjr-alert__message">
          <slot>{{ message }}</slot>
        </div>
      </div>
      <button
        v-if="closable"
        class="hjr-alert__close"
        @click="handleClose"
        type="button"
      >
        ×
      </button>
    </div>
  </Transition>
</template>

<script>
export default {
  name: 'HjrAlert',
  props: {
    type: {
      type: String,
      default: 'info',
      validator: (value) => ['success', 'warning', 'error', 'info'].includes(value)
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    closable: {
      type: Boolean,
      default: false
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  emits: ['close', 'update:visible'],
  computed: {
    alertClasses() {
      return [
        'hjr-alert',
        `hjr-alert--${this.type}`
      ]
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.hjr-alert {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  margin-bottom: 16px;
}

.hjr-alert__icon {
  flex-shrink: 0;
  margin-right: 12px;
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

.hjr-alert__content {
  flex: 1;
  min-width: 0;
}

.hjr-alert__title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
}

.hjr-alert__message {
  font-size: 14px;
  line-height: 1.5;
}

.hjr-alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  color: inherit;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.hjr-alert__close:hover {
  opacity: 1;
}

/* 类型样式 */
.hjr-alert--success {
  background-color: #f0f9ff;
  border-color: #b3e5fc;
  color: #00695c;
}

.hjr-alert--warning {
  background-color: #fff3e0;
  border-color: #ffcc80;
  color: #e65100;
}

.hjr-alert--error {
  background-color: #ffebee;
  border-color: #ffcdd2;
  color: #c62828;
}

.hjr-alert--info {
  background-color: #e3f2fd;
  border-color: #bbdefb;
  color: #1565c0;
}

/* 动画 */
.alert-enter-active,
.alert-leave-active {
  transition: all 0.3s ease;
}

.alert-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.alert-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
